<template>
  <div class="dataEchartsWrap">
    <Headers></Headers>
    <div class="content flex">
      <div class="content_left pt10 pb10" ref="leftBox">
        <div class="fang1" style="height:270px">
          <div class="item_title">
            <div class="zuo"></div>
            <span class="title-inner"> &nbsp;&nbsp;会员积分排行榜&nbsp;&nbsp; </span>
            <div class="you"></div>
          </div>
          <score-rank style="height:210px" class="pl10 pr10" />
        </div>
        <div class="fang1" style="height:200px">
          <div class="item_title">
            <div class="zuo"></div>
            <span class="title-inner"> &nbsp;&nbsp;会员状态&nbsp;&nbsp; </span>
            <div class="you"></div>
          </div>
          <ul class="user_Overview flex">
            <li class="user_Overview-item" style="color: #00fdfa">
              <div class="user_Overview_nums allnum">
                <VueCountUp :start-value="0" :end-value="memberEnable" />
              </div>
              <p style="color:#00fdfa;margin-top:-10px">启用数</p>
            </li>
            <li class="user_Overview-item" style="color: #f5023d">
              <div class="user_Overview_nums laramnum">
                <VueCountUp :start-value="0" :end-value="memberDisable" />
              </div>
              <p style="color:#f5023d;margin-top:-10px">禁用数</p>
            </li>
          </ul>
        </div>
        <div class="fang1" style="height:270px">
          <div class="item_title">
            <div class="zuo"></div>
            <span class="title-inner"> &nbsp;&nbsp;会员审核概况&nbsp;&nbsp; </span>
            <div class="you"></div>
          </div>
          <hollow-pie class="chart-line" />
        </div>
      </div>
      <div class="content_middle">
        <div class="maptitle">
          <div class="zuo"></div>
          <span class="titletext">会员分布城市</span>
          <div class="you"></div>
        </div>
        <time-map class="chart-map" />
      </div>
      <div class="content_right pt10 pb10">
        <div class="fang1" style="height:270px">
          <div class="item_title">
            <div class="zuo"></div>
            <span class="title-inner"> &nbsp;&nbsp;活动概况&nbsp;&nbsp; </span>
            <div class="you"></div>
          </div>
          <gradients-bar class="chart-bar" style="height:210px" />
        </div>
        <div class="fang1" style="height:200px">
          <div class="item_title">
            <div class="zuo"></div>
            <span class="title-inner"> &nbsp;&nbsp;活动审核概况&nbsp;&nbsp; </span>
            <div class="you"></div>
          </div>
          <ul class="user_Overview flex">
            <li class="user_Overview-item" style="color: #e3b337">
              <div class="user_Overview_nums offline">
                <VueCountUp :start-value="0" :end-value="courseAudit['WAIT']" />
              </div>
              <p style="color:#e3b337;margin-top:-10px">待审核</p>
            </li>
            <li class="user_Overview-item" style="color: #07f7a8">
              <div class="user_Overview_nums online">
                <VueCountUp :start-value="0" :end-value="courseAudit['PASS']" />
              </div>
              <p style="color:#07f7a8;margin-top:-10px">通过</p>
            </li>
            <li class="user_Overview-item" style="color: #f5023d">
              <div class="user_Overview_nums laramnum">
                <VueCountUp :start-value="0" :end-value="courseAudit['NOTPASS']" />
              </div>
              <p style="color:#f5023d;margin-top:-10px">拒绝</p>
            </li>
          </ul>
        </div>
        <div class="fang1" style="height:270px">
          <div class="item_title">
            <div class="zuo"></div>
            <span class="title-inner"> &nbsp;&nbsp;活动招募概况&nbsp;&nbsp; </span>
            <div class="you"></div>
          </div>
          <more-bar class="chart-bar" style="height:210px" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import VueCountUp from 'vue-countupjs'
import Headers from '@/components/echarts/headers'
import ScoreRank from '@/components/echarts/scoreRank'
import HollowPie from '@/components/echarts/hollowPie'
import GradientsBar from '@/components/echarts/gradientsBar'
import TimeMap from '@/components/echarts/timeMap'
import MoreBar from '@/components/echarts/moreBar'
import { findAllAccount, countCourse } from '@/api/config'
export default {
  name: 'dataEchartsWrap',
  components: { Headers, VueCountUp, ScoreRank, HollowPie, GradientsBar, TimeMap, MoreBar },
  data () {
    return {
      memberEnable: 0, // 会员启用
      memberDisable: 0, // 会员禁用
      courseAudit: { 'WAIT': 0, 'PASS': 0, 'NOTPASS': 0 }
    }
  },
  mounted () {
    this.getMemberEnable('ENABLE') // 会员启用数
    this.getMemberEnable('DISABLE') // 会员禁用数
    this.getCourseAudit() // 活动审核概况
  },
  methods: {
    // 会员 启用 禁用
    async getMemberEnable (status) {
      let params = {
        status,
        pageSize: 10,
        pageNum: 1,
        userRole: 'ROLE_VENDOR'
      }
      let res = await findAllAccount(params)
      if (res.code === 200) {
        if (status === 'ENABLE') {
          this.memberEnable = res.data.totalCount
        } else {
          this.memberDisable = res.data.totalCount
        }
      }
    },
    // 活动审核概况
    async getCourseAudit () {
      let params = { operate: 'manage' }
      let res = await countCourse(params)
      res.data.map(item => {
        if (['WAIT', 'PASS', 'NOTPASS'].includes(item.key)) {
          this.courseAudit[item.key] = item.value
        }
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '../../styles/var.styl'
.dataEchartsWrap
  // background #fff
  // height: calc(100vh - 64px)
  width: 100%;
  height: 100%;
  padding: 16px 16px 16px 16px;
  box-sizing: border-box;
  background-image: url("../../assets/images/pageBg.png");
  background-size: cover;
  background-position: center center;
  color: #fff
  .chart-title
    text-align center
  .content
    height calc(100% - 60px)
    .content_left, .content_right
      display flex
      justify-content space-between
      flex-direction column
      // align-items center
      height 100%
      width 25%
    .content_middle
      width 50%
      display flex
      justify-content center
      flex-direction column
      align-items center
.chart-line
  height: 250px
  width: 100%
.chart-bar
  height: 250px
  width: 100%
.chart-map
  width: 100%;
  height: 600px;
.content
  // width calc(100% - 240px)
  width 100%
.user_Overview {
  li {
    flex: 1;

    p {
      text-align: center;
      height: 16px;
      // font-size: 16px;
    }

    .user_Overview_nums {
      width: 80px;
      height: 80px;
      text-align: center;
      line-height: 80px;
      font-size: 22px;
      margin: 20px auto;
      background-size: cover;
      background-position: center center;
      position: relative;

      &::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
      }

      &.bgdonghua::before {
        animation: rotating 14s linear infinite;
      }
    }

    .allnum {
      &::before {
        background-image: url("../../assets/images/left_top_lan.png");
        background-size: 100% 100%;
      }
    }

    .online {
      &::before {
        background-image: url("../../assets/images/left_top_lv.png");
        background-size: 100% 100%;
      }
    }

    .offline {
      &::before {
        background-image: url("../../assets/images/left_top_huang.png");
        background-size: 100% 100%;
      }
    }

    .laramnum {
      &::before {
        background-image: url("../../assets/images/left_top_hong.png");
        background-size: 100% 100%;
      }
    }
  }
}
.item_title {
  height: $item-title-height;
  line-height: $item-title-height;
  width: 100%;
  color: #31abe3;
  text-align: center;
  // background: linear-gradient(to right, transparent, #0f0756, transparent);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom 10PX

  .zuo,
  .you {
    width: 58px;
    height: 14px;
    background-image: url("../../assets/images/titles/zuo.png");
  }

  .you {
    transform: rotate(180deg);
  }
  .title-inner {
    font-weight: 900;
    letter-spacing: 2px;
    background: linear-gradient(
      92deg,
      #0072ff 0%,
      #00eaff 48.8525390625%,
      #01aaff 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
.fang1 {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background-image: url("../../assets/images/fang1.png");
  background-size: 100% 100%;
  background-position: center center;
  padding: 20px 10px;
  box-sizing: border-box;
}
.fang2 {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background-image: url("../../assets/images/fang2.png");
  background-size: 100% 100%;
  background-position: center center;
  padding: 20px 10px;
  box-sizing: border-box;
}
.maptitle {
  height: 60px;
  display: flex;
  justify-content: center;
  padding-top: 10px;
  box-sizing: border-box;

  .titletext {
    font-size: 28px;
    font-weight: 900;
    letter-spacing: 6px;
    background: linear-gradient(92deg, #0072ff 0%, #00eaff 48.8525390625%, #01aaff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0 10px;
  }

  .zuo,
  .you {
    background-size: 100% 100%;
    width: 29px;
    height: 20px;
    margin-top: 8px;
  }

  .zuo {
    background: url("../../assets/images/xiezuo.png") no-repeat;
  }

  .you {
    background: url("../../assets/images/xieyou.png") no-repeat;
  }
}
</style>
